<template>
  <div class="main">
    <!-- 角色 -->
    <div
      class="role"
      v-for="(item, index) in roles"
      @click="clickRoleCardHandle(item, index)"
    >
      <div class="role__img">
        <ElImage
          class="w-full h-full"
          :src="item.avatar"
          fit="cover"
        ></ElImage>
      </div>
      <div class="role__content">
        <p class="text-xl">{{ item.name }}</p>
        <p class="opacity-80 text-xs italic m-2">{{ item.description }}</p>
      </div>
    </div>

    <!-- 可添加 -->
    <div class="role">
      <div class="role__img">
        <ElImage
          class="w-full h-full"
          fit="cover"
        ></ElImage>
      </div>
      <div class="role__content">
        <p class="text-xl">可添加角色</p>
        <p class="opacity-80 text-xs italic m-2">
          输入角色提示词，AI自动生成角色
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Roles } from "~/models/data";
// import { Roles } from "~/public/scripts/data";
import { type Role } from "~/models/type";
// import { type Role } from "~/public/scripts/data";

definePageMeta({
  layout: "uni-layout",
});

const roles: Role[] = Roles;

const clickRoleCardHandle = (role: Role, index: number) => {
  navigateTo({
    path: `/aiChat/chat`,
    query: {
      index: index,
    },
  });
};

// useElementSize()
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}
@mixin element($element) {
  &__#{$element} {
    @content;
  }
}
@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}
.main {
  @apply flex flex-row w-screen h-screen justify-center items-center;
}

@include block(role) {
  height: 40vmin;
  width: 25vmin;
  filter: grayscale(70%);
  opacity: 0.8;
  transition: all 0.3s ease;
  box-shadow: 0px 0px 10px 3px rgba($color: #000000, $alpha: 0.2);
  background-color: var(--bg);
  @apply flex flex-col m-2;
  &:hover {
    cursor: pointer;
    filter: grayscale(0%);
    opacity: 1;
    transform: translateY(5px);
  }
  @include element(img) {
    flex: 4;
  }
  @include element(content) {
    flex: 2;
    @apply text-center flex justify-center items-center flex-col p-4;
  }
}
</style>
